import type {ReactNode} from "react"
import {motion} from "framer-motion"

interface PadMockupProps {
    children: ReactNode
    className?: string
}

export function PadMockup({children, className = ""}: PadMockupProps) {
    return (
        <motion.div
            className={`relative mx-auto ${className}`}
            initial={{opacity: 0, y: 30}}
            animate={{opacity: 1, y: 0}}
            transition={{duration: 0.5}}
            whileHover={{scale: 1.01}}
        >
            <div
                className="relative mx-auto border-[20px] border-gray-800 bg-gray-800 rounded-[2rem] h-[700px] w-[520px] shadow-2xl">
                {/* Camera */}
                <div
                    className="absolute top-[10px] left-1/2 -translate-x-1/2 w-[60px] h-[6px] bg-black rounded-full opacity-60"></div>
                {/* Screen */}
                <div className="rounded-[1.5rem] overflow-hidden w-[480px] h-[660px] bg-white">
                    <div className="w-full h-full overflow-hidden">{children}</div>
                </div>
            </div>
        </motion.div>
    )
}
